<template>
  <div class="flow-detail">
    <a-row>
      <a-col :offset="3">
      <div class="flow-detail-item" v-for="(item, index) in flowList" :key="index">
        <a-row>
          <a-col :span="4">
            <div class="flow-detail-item-left">
              <div class="name-round">
                {{item.nodeDetails[0].approverName}}
              </div>
            </div>
          </a-col>
          <a-col :span="20">
            <div class="flow-detail-item-right">
              <div class="name-list">
                {{item.nodeDetails[0].approverName}}
              <br/>
                {{item.approveLevel}}级审批
              </div>
            </div>
          </a-col>
        </a-row>
        <div class="left-arrow"></div>
      </div>
     </a-col>
    </a-row>
  </div>
</template>

<script>
export default {
  name: 'flowDetail',
  data() {
    return {};
  },
  computed: {
    flowList() {
      return this.formModel.nodeList;
    }
  },
  props: {
    formModel: {
      type: Object,
      default() {
        return {};
      }
    }
  }
};
</script>
<style lang="less" scoped>
  .flow-detail-item {
    width: 100%;
    width: 30rem;
    height: 80px;
    padding: 10px;
    position: relative;
    box-shadow: 0 0 5px grey;
    border-radius: 5px;
    color: white;
    &:not(:first-child){
      margin-top: 1rem;
    }
    &:nth-child(odd){
      .flow-detail-item-left{
        background: yellowgreen;
      }
    }
    &:nth-child(even){
      .flow-detail-item-left{
        background: rgb(205, 50, 76);
      }
    }
    .flow-detail-item-left{
      width: 60px;
      text-align: center;
      align-items: center;
      display: flex;
      height: 60px;
      border-radius:100%;
      .name-round {
        width: 100%;
        text-align: center;
      }
    }
    .flow-detail-item-right{
      text-align: center;
      align-items: center;
      display: flex;
      height: 60px;
      color: grey;
    }
    .left-arrow {
      width: .8rem;
      height: .8rem;
      border-radius: .1rem;
      position: absolute;
      box-shadow: 1px 1px 1px grey;
      transform: translateX(-50%) translateY(-50%) rotate(135deg);
      top: 50%;
      left: 0;
      z-index: 1;
      background: white;
    }
    &::before{
      content: '√';
      display: block;
      width: 1rem;
      height: 1rem;
      position: absolute;
      left: -2rem;
      top: 50%;
      box-shadow: 0 0 3px grey;
      transform: translateY(-50%);
      border-radius: 100%;
      background: green;
      text-align: center;
      line-height: 1rem;
      font-weight: 800;
    }
    &:not(:last-child):after{
      content: '';
      display: block;
      width: 1rem;
      height: 1rem;
      position: absolute;
      left: -1.5rem;
      transform: translateX(-50%);
      top: calc( 50% + .5rem);
      height: 100%;
      width: 3px;
      background: #80808059;
    }

  }
</style>
